<template>
  <div class="register container backgroundColor login">
    <div class="input">
      <group>
        <x-input placeholder="请输入手机号" v-model="email" class="font15"></x-input>
      </group>
      <group>
        <x-input name="mobile" placeholder="验证码" keyboard="number" v-model="code" class="font15">
          <span
            slot="right"
            :class="{defaultColor:!codeDisabled,disabledColor:codeDisabled}"
            @click="openDialog">
            {{codeContent}}
          </span>
        </x-input>
      </group>
      <group class="invateStyle">
        <x-input
          placeholder="推广码"
          name="mobile"
          keyboard="number"
          v-model="invate"
          class="font15"
          :disabled="!showinvate">
          <!--<span slot="right" v-if="showinvate" class="defaultColor" @click="getInvateCode">获取推广码</span>-->
        </x-input>
      </group>
      <group>
        <x-input placeholder="设置登录密码" :type="passwordType" v-model="pwd" class="font15">
          <img src="../assets/img/closeEye.png" alt="" slot="right" v-if="!openEye" @click="changePwdType" style="width:18px;">
          <img src="../assets/img/openEye.png" alt="" slot="right" v-if="openEye" @click="changePwdType" style="width:18px;">
        </x-input>
      </group>
      <div style="margin-top: 30px;">
        <x-button
          type="primary"
          @click.native="registerClick"
          :disabled="registerDisabled">注册</x-button>
      </div>
      <div class="center" style="margin-top:30px;" v-if="showinvate">
        <span class="font14">
          <span style="color:#ffffff;">已有账户？</span><span class="defaultColor" @click="$router.push('/login')">去登录</span></span>
      </div>
      <!--<Captcha-->
        <!--:email="email"-->
        <!--:showToast="showToast"-->
        <!--@close="close"-->
        <!--@setInter="setInter"-->
      <!--&gt;</Captcha>-->
      <x-dialog
        v-model="showInvateCode"
        :dialog-style="{'background': 'rgba(0,0,0,0.6)','padding':'35px 0'}"
        :hide-on-blur="true">
        <div class="whiteColor font16">
          您可以通过以下方式获取邀请码
        </div>
        <div class="whiteColor">
          创世邀请码：{{invateInput}}
        </div>
        <Copy :invateInput="invateInput" butContent="复制" :mini="true" @copySuccess="copySuccess"></Copy>
      </x-dialog>
    </div>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import Captcha from './common/captcha.vue'
  import { XInput,Group,XDialog } from 'vux'
  import axios from 'axios'
  import Copy from './common/copy.vue'
  export default{
    data(){
      return {
        openEye: false,
        passwordType:'password',
        btnFlag:false,
        showToast:false,
        codeContent:'发送验证码',
        email:'',
        pwd:'',
        invate:'',
        showinvate:true,
        invateInput:'',
        code:'',
        timer:null,
        showInvateCode:false,
        registerDisabled:false,
        codeDisabled:false,
        smsId:''
      }
    },
    methods:{
      close(){
        this.showToast = false;
      },
      setInter(){
//        this.smsId = smsCode
        var count = 60;
        this.codeContent = count + 's';
        this.codeDisabled = true;
        this.timer = setInterval(()=>{
          count--;
          this.codeContent = count + 's';
          if(count<=0){
            clearInterval(this.timer);
            this.codeDisabled = false;
            this.codeContent = '发送验证码';
          }
        },1000)
      },
      openDialog(){
        if(this.codeDisabled){
          return;
        }
        if(!this.regex().phoneReg.test(this.email)){
          this.toastFn('请先填写正确的手机号');
          return;
        }
        this.service('smscode',{
          phone:this.email
        },'post').then(res=>{
          if(res.code== 200){
            this.toastFn(res.msg,'','success');
            this.setInter()
            return
          }
          this.toastFn(res.msg);
        })
//        this.showToast = true;
      },
      changePwdType(){
        this.passwordType = this.passwordType === 'password'?'text':'password';
        this.openEye = !this.openEye;
      },
      getInvateCode(){
        this.showInvateCode = true;
        this.invateInput = window.g.invateCode;
//        axios.get('../../../static/config.json').then(res=>{
//          this.showInvateCode = true;
//          this.invateInput = res.data.invateCode;
//        })
      },
      regFn(){
        if(!this.regex().phoneReg.test(this.email)){
          this.toastFn('请输入格式正确的手机号');
          return false;
        }
        if(!this.regex().code.test(this.code)){
          this.toastFn('请输入格式正确的短信验证码');
          return false;
        }
        if(this.pwd.length<6 || this.pwd.length>64){
          this.toastFn('请输入6到64位的密码');
          return false;
        }
        return true;
      },
      registerClick(){
        if(!this.regFn()){
          return;
        };
        this.registerDisabled = true;
        this.service('register',{
          phone:this.email,
          password:this.pwd,
          smscode:this.code,
          invitecode:this.invate
//          smsId:this.smsId
        },'post').then((res)=>{
          console.log(res)
          this.registerDisabled = false;
          clearInterval(this.timer);
          this.codeDisabled = false;
          this.codeContent = '发送验证码';
          if(res.code== 200){
            this.init();
            this.toastFn(res.msg,'','success');
            if(!this.showinvate){
              location.href = '/download.html'
              return;
            }
            this.$router.push('/login');
            return
          }
          this.toastFn(res.msg);
        })
      },
      init(){
        this.email = '';
        this.pwd = '';
        this.code = '';
        this.invate = '';
        this.codeDisabled = false;
        this.codeContent = '发送验证码';
      },
      copySuccess(){
        this.showInvateCode = false;
      }
    },
    created(){
      this.invate = this.$route.query.invite_code;
      if(this.invate){
        this.showinvate = false
      }else{
        this.showinvate = true
      }
    },
    components:{
      XInput,
      Group,
      XDialog,
      Header,
      Captcha,
      Copy
    }
  }
</script>
<style>
  .register{
    position: relative;
  }
  .register>.input{
    padding-top: 95px;
    padding-left:6.6%;
    padding-right:6.6%;
  }
  .invateStyle .vux-x-input.disabled .weui-input{
    text-fill-color:#ffffff;
    -webkit-text-fill-color:#ffffff;
  }
</style>
